<template>
	<view class="health-charts">
		<view class="card">
			<view class="card-title">
				右眼验光对比图表
			</view>
			<table-points class="table-points" :data="reye"></table-points>
		</view>
		<view class="card">
			<view class="card-title">
				左眼验光对比图表
			</view>
			<table-points class="table-points" :data="leye"></table-points>
		</view>
	</view>
</template>

<script setup>
import tablePoints from '@/widgets/tablePoints.vue';
import { useUserStore } from '@/store/user';
import { computed } from 'vue';
const userStore = useUserStore();
const reye = computed(() => {
	return userStore.optometryLineData.map((item) => ({
		createTime: item.createTime,
		customerId: item.customerId,
		Astigmatism: item.rAstigmatism,
		Diopter: item.rDiopter,
		OcularAxis: item.rOcularAxis,
		degree: item.rdegree,
	}));
});
const leye = computed(() => {
	return userStore.optometryLineData.map((item) => ({
		createTime: item.createTime,
		customerId: item.customerId,
		Astigmatism: item.lAstigmatism,
		Diopter: item.lDiopter,
		OcularAxis: item.lOcularAxis,
		degree: item.ldegree,
	}));
});
</script>

<style lang="scss">
.health-charts {
	.card {
		background-color: white;
		border-radius: 20rpx;
		.card-title {
			height: 96rpx;
			font-size: 32rpx;
			line-height: 96rpx;
			padding: 0 30rpx;
			color: $text-color1;
			box-sizing: border-box;
			border-bottom: 2rpx solid #E5E5E5;
		}
	}
	.card + .card {
		margin-top: 18rpx;
	}
}
</style>